// 发货单退转记录组件,注意要用反引号
Vue.component('invoice-handle-dialog', {
    template: `
    <div>
       <el-dialog title="发货单退剩转操作记录" :visible.sync="handleDialog.show" width="75%" center :close-on-click-modal="0"
        @close="cancel" v-loading="handleDialog.loading" custom-class="handle-record-dialog">
            <el-timeline>
                <template v-for="handleItem in handleList">
                    <el-timeline-item :timestamp="handleItem.createTime" placement="top" :type="handleItem.typeClass">
                        <el-descriptions direction="vertical" :column="9" border size="mini">
                            <el-descriptions-item label="转入/转出">
                                <el-tag v-if="handleItem.inOutTxt == '流入'" type="success" size="mini">转入</el-tag>
                                <el-tag v-if="handleItem.inOutTxt == '流出'" type="warning" size="mini">转出</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="操作类型" label-class-name="handle-item-operate" content-class-name="handle-item-operate">
                                <el-tag size="mini" :type="handleItem.typeClass">{{handleItem.operateTypeTxt}}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="分料类型">{{handleItem.tranTypeTxt}}</el-descriptions-item>
                            <el-descriptions-item label="退料类型">{{handleItem.reTypeTxt}}</el-descriptions-item>
                            <el-descriptions-item label="操作方量(方)">{{handleItem.operateStere}}</el-descriptions-item>
                            <el-descriptions-item label="操作人员">{{handleItem.creator}}</el-descriptions-item>
                            <el-descriptions-item label="操作时间" label-class-name="handle-operate-time" content-class-name="handle-operate-time">{{handleItem.createTime}}</el-descriptions-item>
                            <template v-if="handleItem.inOutTxt == '流入'">
                                <el-descriptions-item label="源发货单" label-class-name="handle-item-invoice" content-class-name="handle-item-invoice">
                                    <el-link type="primary" @click="showHandInvDetail(handleItem.sourceInvoiceId)">{{handleItem.sourceInvoiceCode}}</el-link>
                                </el-descriptions-item>
                            </template>
                            <template v-else>
                                <el-descriptions-item label="目标发货单" label-class-name="handle-item-invoice" content-class-name="handle-item-invoice">
                                    <el-link type="primary" @click="showHandInvDetail(handleItem.targetInvoiceId)">{{handleItem.targetInvoiceCode}}</el-link>
                                </el-descriptions-item>
                            </template>
                            <el-descriptions-item label="操作备注">{{handleItem.remark}}</el-descriptions-item>
                        </el-descriptions>
                    </el-timeline-item>
                </template>
            </el-timeline>
        </el-dialog>
        <!--  发货单详情  -->
        <invoice-detail-dialog v-if="detailDialog.show" :invoice-id="detailDialog.invoiceId"
                           @closed="detailDialog.show = false"></invoice-detail-dialog>
    </div>
      `,
    props: {
        invoiceId: {
            type: Number,
        },
    },
    data() {
        return {
            handleList: [],
            handleDialog: {
                show: false,
                loading: false,
            },
            //  详情数据
            detailDialog: {
                show: false,
                invoiceId: false,
            },
        };
    },
    created() {
        let that = this;
        that.invoiceId = that.invoiceId;
        that.loadHandleRecords();
    },
    methods: {
        //  加载操作记录
        loadHandleRecords() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            that.handleDialog.show = true;
            that.handleDialog.loading = true;
            $.ajax({
                type: "post",
                url: "/pro/invoice/handle/list/" + invId,
                async: true,
                dataType: 'json',
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        let handleRecords = res.data;
                        if (handleRecords == null || handleRecords.length == 0) {
                            that.$message({
                                showClose: true,
                                message: '该发货单没有退剩转操作记录',
                            });
                            that.cancel();
                            return;
                        }
                        that.handleList = handleRecords;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询发货单操作记录失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.handleDialog.loading = false;
                }
            })
        },
        //  取消添加
        cancel() {
            let that = this;
            //  调用父级的关闭弹窗
            this.$emit("closed")
        },
        /**
         * 显示发货单详情
         * @param invoiceId
         */
        showHandInvDetail(invoiceId) {
            let that = this;
            that.detailDialog.show = true;
            that.detailDialog.invoiceId = invoiceId;
        },
    }
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    data() {
        return {};
    }
});
